<template>
  <div>
    <el-row>
      <el-col :span="13">
        <el-form :inline="true" :model="state.query" class="user-search">
          <el-form-item label="配件名称">
            <el-input v-model="state.query.fittingName" size="small" placeholder="输入配件名称" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" size="small" @click="search">搜索</el-button>
          </el-form-item>
        </el-form>

        <el-table size="small" :data="state.fittingList" highlight-current-row>
          <el-table-column sortable label="配件ID" width="100" prop="id" />
          <el-table-column sortable label="配件名称" width="200" prop="fittingName" />
          <el-table-column sortable label="配件型号" prop="fittingModel" />
          <el-table-column sortable label="有效期(天)" prop="expired" />
          <el-table-column label="绑定日期" width="130">
            <template #default="scope">
              <el-date-picker
                size="small"
                v-model="scope.row.bindTime"
                clearable
                placeholder="请选择绑定日期"
                type="date"
                value-format="x"
                class="w-full"
              />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="primary" size="small" @click="selectFitting(scope.row)"
                >选择</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          :total="state.total"
          :limit="state.page.pageSize"
          :page="state.page.pageNo"
          @pagination="getPageEvents"
        />
      </el-col>

      <el-col :span="11" style="padding: 0 10px">
        <div style="padding-top: 30px">已绑定：</div>
        <el-table size="small" :data="state.bindFittings" highlight-current-row>
          <el-table-column label="配件ID" align="center" prop="id" />
          <el-table-column label="配件名称" align="center" prop="fittingName" />
          <el-table-column label="配件型号" align="center" prop="fittingModel" />
          <el-table-column
            label="绑定日期"
            align="center"
            prop="bindTime"
            :formatter="dateFormatter2"
          />
          <!-- <el-table-column label="有效期(天)" align="center" prop="expired" /> -->
          <el-table-column
            label="过期日期"
            align="center"
            prop="expiredTime"
            :formatter="dateFormatter2"
          />
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button type="danger" size="small" @click="handleDelBind(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import { getFittingPage } from '@/api/bms/fitting/index'
import { getDevice } from '@/api/bms/device/index'
import { saveFittingsBindDevice } from '@/api/bms/device/index'
import { dateFormatter2 } from '@/utils/formatTime'

const route = useRoute()
const { id } = route.params

const emit = defineEmits(['bindDevice'])

// const props = defineProps({
//   // detail: {
//   //   type: Object,
//   //   default() {
//   //     return {}
//   //   }
//   // }
// })

const state = reactive({
  fittingList: [],
  bindFittings: [],
  total: 0,
  page: {
    fittingStatus: 2,
    pageSize: 10,
    pageNo: 1
  },
  query: {
    fittingName: ''
  },
  loading: false
})

// watch(
//   () => props.detail,
//   (newDetail) => {
//     // 在这里执行相应的更新逻辑
//     state.query.fittingName = newDetail.fittingName
//     getData()
//     state.bindFittings = newDetail.fittings
//   }
// )

const getData = () => {
  getFittingPage({ ...state.page, ...state.query }).then((res) => {
    state.fittingList = res.list || []
    state.total = res.total
  })
  getDevice(id).then((res) => {
    state.bindFittings = res.fittings
  })
}
getData()

const selectFitting = (row) => {
  if (!row.bindTime) {
    ElMessage.warning('请先选择绑定日期')
    return
  }
  if (
    state.bindFittings.findIndex((d) => {
      return d == row.id
    }) >= 0
  ) {
    return
  }
  state.bindFittings.push(row)
  saveBindDevices()
}

const handleDelBind = (index, row) => {
  state.bindFittings.splice(index, 1)
  saveBindDevices()
}

const saveBindDevices = () => {
  saveFittingsBindDevice({
    id: id,
    fittings: state.bindFittings.map((item) => ({ id: item.id, bindTime: item.bindTime }))
  }).then(() => {
    state.page.pageNo = 1
    getData()
  })
}

const search = () => {
  state.page.pageNo = 1
  getData()
}

const getPageEvents = (e) => {
  state.page.pageSize = e.limit
  state.page.pageNo = e.page
  getData()
}
</script>
